*{
    box-sizing: border-box;
}
.community_container{
    width: 100%;
    height: calc(90vh + 20px);
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
    margin: 0;
}
.container-left{
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
.container-left-list{
    height: 224px;
    width: 239px;
    margin-top: 10px;
}
.container-left-list-item{
    width: 100%;
    height: 48px;
    margin-top: 5px;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}
.container-left-list-item:hover {
    background-color: #f7f7f7; /* 悬停时改变背景颜色 */
    border-radius: 25px;
}
.container-left-list-item-icon{
    width: 24px;
    height: 24px;
    margin-left: 12px;
}
.container-left-list-item-text{
    width: 32px;
    margin-left: 12px;
    font-size: 16px;
    font-weight: 600;
}
.container-left-more{
    height: 68px;
    width: 100%;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.container-left-more-icon{
    width: 24px;
    height: 24px;
    margin-left: 12px;
}
.container-left-more-text{
    width: 32px;
    margin-left: 12px;
    font-size: 16px;
    font-weight: 600;
}
.container-right{
    width: 80%;
    height: 100%;
    display: grid;
    box-sizing: border-box;
    padding-top: 10px; /* 在网格四周留空 */
    padding-bottom: 10px; /* 在网格四周留空 */
    /*  声明列的宽度  */
    grid-template-columns: repeat(4, calc((80vw - 50px) / 4));
    /*  声明行间距和列间距  */
    gap: 10px;
    overflow-x: auto;  /* 隐藏横向滚动条 */
    overflow-y: auto;
}
.container-right::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
}
.container-right-item{
    height: 374px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container-right-item-img{
    height: 303px;
    width: 100%;
    border-radius: 10px;
}
.container-right-item-footer{
    width: 100%;
    height: 71px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container-right-item-footer-text{
    width: 100%;
    height: 20px;
    margin-bottom: 6px;
    font-size: 14px;
    white-space: nowrap;       /* 禁止换行 */
    overflow: hidden;          /* 隐藏溢出部分 */
    text-overflow: ellipsis;   /* 显示省略号 */
}
.introduce{
    width: 100%;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;

}
.author{
    width: 74px;
    height: 20px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.author-icon{
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-right: 6px;
}
.author-text{

}
.like{
    width: 39px;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.like-icon{
    width: 16px;
    height: 16px;
}
.like-text{
    margin-left: 2px;
}
/* 弹出框容器 */
.post-dialog{
    position: fixed;
    top: 5vh ;
    left: 15% ;
    width: 70vw ;
    height: 90vh ;
    margin: 0 !important;
    border-radius: 50%;
}
.el-dialog{
    padding: 0;
}
.el-dialog__header{
    margin-bottom: 0;
    padding-bottom: 0;
}
.el-dialog__title{
    height: 0;
    display: flex;
    justify-content: center;
    font-size: 18px;
    align-items: center;
}
.el-dialog__body{
    display: flex !important;
    flex-direction: row!important;
    height: 100%;
}
/* 弹框左侧（图片轮播） */
.dialog_left {
    width: 60%;
    padding: 20px;
    background-color: #f7f7f7;
}

.dialog_carousel {
    height: 100%;
}

/* 轮播图图片样式 */
.carousel_item-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 弹框右侧（内容） */
.dialog_right {
    width: 40%;
    padding: 20px;
    background-color: #ffffff;
    border-left: 1px solid #e4e4e4;
}

/* 作者信息 */
.dialog_author {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.dialog_author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.dialog_author-text {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

/* 内容区域 */
.dialog_content {
    margin-bottom: 10px;
    height: 230px; /* 设置最大高度 */
    display: flex;
    flex-direction: column;
}

.dialog_content-text {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
    overflow-y: auto; /* 当内容过多时显示滚动条 */
    padding-right: 10px; /* 防止滚动条挡住文字 */
    height: 230px;
}
.dialog_content-text::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
}
/* 时间、地区、喜欢 */
.dialog_content-footer {
    height: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #888;
}

.dialog_content-datetime {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.dialog_content-area {
    width: 40%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog_content-like {
    width: 30%;
    text-align: right;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    color: #ffd04b;
    cursor: pointer; /* 鼠标变成手型 */
    user-select: text; /* 允许选中文本 */
    transition: all 0.2s ease-in-out;
}
.dialog_content-like:hover {
    color: #ffa500; /* 鼠标悬停时颜色加深 */
    text-decoration: underline; /* 悬停时加下划线 */
}
/* 评论部分 */
.dialog_comments {
    height: 180px;
    margin-top: 20px;
    border-top: 1px solid #e4e4e4;
    padding-top: 10px;
    overflow: hidden;
    overflow-y: auto;
}
.dialog_comments::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
}
.dialog_comments_item {
    display: flex;
    margin-bottom: 15px;
    flex-direction: column;
}

.dialog_comments-main {
    display: flex;
    flex: 1;
    align-items: center;
}

.dialog__comment-avatar--main {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.dialog_comments-text--main {
    font-size: 14px;
    color: black;
}

.dialog__comment-footer {
    display: flex;
    align-items: center;
    margin-left: 40px;
}

.dialog_comments-avatar--footer {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.dialog_comments-text--footer {
    font-size: 14px;
    color: black;
}
.dialog_input{
    height: 20px;
    border: none;
}
.upload-demo i {
    font-size: 28px;
    color: #409eff;
}
.community_dialog .el-dialog__body{
    display: flex !important;
    flex-direction: column!important;
    height: 100%;
}
.dialog-footer{
    display: flex;
    align-items: center;
    justify-content: center;
}